<template>
  <Navbar
    title="设置密码"
    left-text="返回"
    left-arrow
    @click-left="onClickLeft"
  />

  <van-form>
    <van-cell-group inset>
      <van-field
        v-model="state.password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
        v-model="state.password2"
        type="password"
        name="password2"
        label="确认密码"
        placeholder="确认密码"
        :rules="[{ required: true, message: '请确认密码' }]"
      />
    </van-cell-group>
    <div style="margin: 16px">
      <van-button round block type="primary" @click="submit"> 提交 </van-button>
    </div>
  </van-form>
</template>

<script setup lang="ts">
import { useRouter, useRoute } from "vue-router";
import { reactive } from "vue";
import { showFailToast } from "vant";
import { finishRegisterApi } from "@/api/user";
import { useUserStore } from "@/stores/user";

const state = reactive({
  password: "",
  password2: "",
});

const router = useRouter();
const onClickLeft = () => {
  router.go(-1);
};

const route = useRoute();
const store = useUserStore();
const submit = async () => {
  if (state.password === state.password2) {
    const res = await finishRegisterApi({
      password: state.password,
      // tel: localStorage.getItem("tel") || "",
      // tel: route.params.tel,
      tel: store.tel,
    });
    if (res) {
      router.push("/login");
    }
  } else {
    showFailToast("密码不一致");
  }
};
</script>
